
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="/WEB-INF/functions" prefix="fc"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<div id="begin" class="inner">
	<ol class="path">
		<li><a href="index.html">Home</a></li>
		<li><a href="deal.html">Featured deal</a></li>
	</ol>
	<h2>${productBean.productArticle.title }</h2>
</div>
<!-- begin -->
<div class="inner">
	<div
		style="width: 690px; height: 290px; margin-bottom: 20px; font-family: sans-serif; overflow: auto;">
		<div class="viewdeal-keydata">
			<a href="/codeschool-jquery-bundle/buy/" class="viewdeal-img"><img
				src="${defaultLocalPath}images/big/${productBean.productMediaPath}"
				width="440" height="248"></a>

			<div class="viewdeal-rating">
				Customer Rating<br> <img style="vertical-align: middle;"
					src="images/icons/stars_4_5.png" width="98" height="17" /> (58)
			</div>
		</div>
		<div class="viewdeal-plans">
			<em>Choose your plan</em>
			<form id="planOpts">
			<c:forEach items="${productBean.plansBean}" var="planBean" >
				<label for="radio-${planBean.plan.planID }" tabindex="1">${planBean.planArticle.title }</label> <input type="radio"
					name="radio-button-inline" id="radio-${planBean.plan.planID }" value="radio-${planBean.plan.planID }" />
			</c:forEach> 
			</form>
		</div>
		<div class="viewdeal-trial">
			<em>Free trial</em><br />
		</div>
	</div>
	<div>
		<h3>Available plans for this product :</h3>
		<div class="toggle">
			<c:forEach items="${productBean.plansBean}" var="plan">
				<div class="trigger">
					<a href="#">${plan.planArticle.title }</a>
				</div>
				<div class="container">
					<p>
						<b>${plan.planArticle.body }</b>
					</p>
				</div>

			</c:forEach>
			</div>
			
	</div>
	<ol class="tabs" style="clear: left">
		<li class="active"><a href="#first">Highlights</a></li>
<!-- 		<li class=""><a href="#second">Fine print</a></li> -->
<!-- 		<li class=""><a href="#third">Video</a></li> -->
	</ol>
	<div class="tab_container">
		<div id="first" class="tab_content" style="display: none;">
			<h4>${productBean.productArticle.shorte }</h4>
			<p>${productBean.productArticle.body }</p>
		</div>
		
	</div>
</div>